<template>
  <div class="main" ref="box">
    <!-- 伸缩 -->
    <div class="expand" @click="changeExpand">
      <el-icon size="20" v-show="expand">
        <Expand />
      </el-icon>
      <el-icon size="20" v-show="!expand">
        <Fold />
      </el-icon>
    </div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>
        {{ Breadcrumb[0] }}
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: $route.path }">
        {{ Breadcrumb[1] }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 背景色 -->
    <el-switch
      class="changeColorSelect"
      v-model="value1"
      @change="changeColor"
      inactive-text="日间"
      active-text="夜间"
    />
    <!-- 放大/缩小 -->
    <div class="extendsBox" @click="handlerFull">
      <el-icon size="20" v-show="isFull"><Aim /></el-icon>
      <el-icon size="20" v-show="!isFull"><FullScreen /></el-icon>
    </div>
    <!-- 头像 -->
    <div class="icon">
      <span>{{ $store.state.user.info.nickName }}</span>
      <el-dropdown @command="handleCommand">
        <el-avatar :size="40" :src="$store.state.user.info.headImg" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="a">回到首页</el-dropdown-item>
            <el-dropdown-item command="b">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
//引入mitt
import eventBus from "../utils/eventBus";
import screenfull from "screenfull";
export default {
  props: ["expand"],
  data() {
    return {
      value1: false, //切换日间/夜间
      isFull: false, //放大/缩小
      Breadcrumb: [], //面包屑
    };
  },
  //解决缩放插件Bug
  created() {
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenfull.on("change", () => {
      // 将当前是否全屏的状态赋值给自己定义的变量isFull，即可完成图标的同步切换
      this.isFull = screenfull.isFullscreen;
    });
  },
  //监听面包屑的变化
  watch: {
    Breadcrumb: {
      handler(newValue) {
        this.changeBreadcrumb();
      },
      immediate: true,
    },
  },
  methods: {
    //切换日间/夜间
    changeColor() {
      eventBus.emit("changeColor", this.value1);
      if (!this.value1) {
        this.$refs.box.classList.remove("changeColor");
      } else {
        this.$refs.box.classList.add("changeColor");
      }
    },
    //改变头部面包屑
    changeBreadcrumb() {
      eventBus.on("getBreadcrumb", (Breadcrumb) => {
        this.Breadcrumb = Breadcrumb;
      });
    },
    //展开函数
    changeExpand() {
      this.$emit("changeExpand");
    },
    //全屏
    handlerFull() {
      screenfull.toggle();
      this.isFull = !this.isFull;
    },
    //退出登录
    handleCommand(command) {
      switch (command) {
        case "a":
          this.$router.replace("/dashboard/console");
          break;
        case "b":
          this.$store.dispatch("user/loginout");
          // window.location.replace("/login"); //通过这个跳转会实现页面刷新
          break;

        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 50px;
  padding: 0 30px 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid gray;
  display: flex;
  align-items: center;
  .expand {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.changeColor {
  color: $all_color_night;
  background-color: $all_bgcolor_night;
}
.changeColorSelect {
  margin-left: auto;
}
.extendsBox {
  width: 20px;
  display: flex;
  margin-left: 10px;
  align-items: center;
}
.icon {
  display: flex;
  align-items: center;
  span {
    margin: 0 10px;
  }
}
</style>
